import { reactive, watchEffect, h, render } from 'vue';

const state = reactive({
  loading: false,
  list: []
});

// 动态插入 CSS 样式
const insertStyles = () => {
  const style = document.createElement('style');
  style.textContent = `
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes fadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }
    
    .frame-container {
      animation: fadeIn 0.5s ease-in-out;
    }
    
    .frame-container.fade-out {
      animation: fadeOut 0.5s ease-in-out;
    }
    
    .frame-item {
      background: #e5e5e5;
      border-radius: 4px;
    }
  `;
  document.head.appendChild(style);
};


insertStyles(); // 执行插入样式

watchEffect(() => {
  const children = state.list.map((el) => {
    const rect = el.getBoundingClientRect();
    return h('div', {
      class: 'frame-item',
      style: {
        position: 'absolute',
        top: rect.top + 'px',
        left: rect.left + 'px',
        width: '0px',  // 初始化宽度为0
        height: rect.height + 'px',
        borderRadius: getComputedStyle(el).borderRadius,
        maxWidth: rect.width + 'px',  // 确保动画结束时的最大宽度
      },
    });
  });

  const container = h('div', { class: 'frame-container' }, children);

  if (state.loading) {
    render(container, document.body);

    // 动态触发动画
    requestAnimationFrame(() => {
      state.list.forEach((el, index) => {
        const rect = el.getBoundingClientRect();
        const frameItem = document.querySelectorAll('.frame-item')[index];
        frameItem.style.width = rect.width + 'px';  // 动态设置最终宽度
        frameItem.style.transition = 'width 1.5s ease-in-out';  // 过渡动画
      });
    });
  } else {
    const existingContainer = document.querySelector('.frame-container');
    if (existingContainer) {
      existingContainer.classList.add('fade-out');
      setTimeout(() => {
        render(null, document.body);
      }, 300);
    }
  }
});


const Frame = {
  mounted(el, binding) {
    state.loading = binding.value;
  },
  updated(el, binding) {
    state.loading = binding.value;
  },
  unmounted(el) {
    state.loading = false;
  }
};

const FrameItem = {
  mounted(el) {
    state.list.push(el);
  },
  unmounted(el) {
    const i = state.list.indexOf(el);
    if (i !== -1) {
      state.list.splice(i, 1);
    }
  }
};

const vFrame = {
  install: (app) => {
    app.directive('frame', Frame);
    app.directive('frame-item', FrameItem);
  }
};

export default vFrame;
